<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>酒店搜索结果 - 携程旅行网</title>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css" />
</head>

<body>
    <!-- 顶部导航栏（复用首页 header） -->
    <header class="ctrip-header">
        <div class="container">
            <div class="header-top">
                <div class="logo">
                    <a href="#"><img src="picture/logo.png" alt="携程旅行网" /></a>
                </div>
                <div class="nav-main">
                    <ul>
                        <li><a href="#" class="active"><i class="fas fa-hotel"></i> 酒店</a></li>
                        <li><a href="flight.html"><i class="fas fa-plane"></i> 机票</a></li>
                        <li><a href="#"><i class="fas fa-train"></i> 火车票</a></li>
                        <li><a href="#"><i class="fas fa-ship"></i> 旅游</a></li>
                        <li><a href="#"><i class="fas fa-car"></i> 租车</a></li>
                        <li><a href="#"><i class="fas fa-utensils"></i> 美食</a></li>
                        <li><a href="#"><i class="fas fa-gift"></i> 团购</a></li>
                    </ul>
                </div>
                <div class="user-area">
                    <a href="#" class="login">登录/注册</a>
                    <a href="#" class="app-download">下载携程APP</a>
                </div>
            </div>
        </div>
    </header>


    <div class="results-container">
        <div class="search-summary">
            显示“<strong>成都</strong>”相关酒店（共找到 3 个）
        </div>

        <a href="h-detail.html" class="hotel-card">
            <img src="picture/chengdu1.jpg" alt="酒店1" />
            <div class="hotel-info">
                <h3>成都群光君悦酒店</h3>
                <div class="location"><i class="fas fa-map-marker-alt"></i> 春熙路·太古里</div>
                <div class="stars">⭐⭐⭐⭐⭐</div>
                <div class="price">￥1050 / 晚</div>
            </div>
        </a>

        <a href="h-detail.html" class="hotel-card">
            <img src="picture/chengdu2.jpg" alt="酒店2" />
            <div class="hotel-info">
                <h3>成都融创万达文华</h3>
                <div class="location"><i class="fas fa-map-marker-alt"></i> 郫都区·欢乐谷附近</div>
                <div class="stars">⭐⭐⭐⭐</div>
                <div class="price">￥780 / 晚</div>
            </div>
        </a>

        <a href="h-detail.html" class="hotel-card">
            <img src="picture/chengdu3.jpg" alt="酒店3" />
            <div class="hotel-info">
                <h3>成都如家精选</h3>
                <div class="location"><i class="fas fa-map-marker-alt"></i> 锦江区·合江亭</div>
                <div class="stars">⭐⭐⭐</div>
                <div class="price">￥288 / 晚</div>
            </div>
        </a>
    </div>
</body>

</html>